<!--
  description: demo
  @author: GuoSiYue
  date: 2021-11-11
 -->

<template>
    <div class="app">
        <!-- 通过transition实现动画效果 -->
        <div>
            <button @click="show = !show">Toogle</button>
        </div>
        <transition name="fade">
            <h2 v-if="show">Hello World</h2>
        </transition>

        <!-- 通过animation实现动画效果 -->
        <div>
            <button @click="Show = !Show">切换</button>
        </div>
        <transition name="bounce">
            <h2 v-if="Show">但是太阳，他每时每刻都是夕阳也都是旭日。当他熄灭着走下山去收尽苍凉残照之际，正是他在另一面燃烧着爬上山巅布散烈烈朝辉之时。
                那一天，我也将沉静着走下山去，扶着我的拐杖。有一天，在某一处山洼里，势必会跑上来一个欢蹦的孩子，抱着他的玩具。
            </h2>
        </transition>

        <!--
              显示的指定过渡时间:duration属性
              number：同时设置进入和离开的过渡时间：:duration="3000"
              object：分别设置进入和离开的过渡时间：:duration="{enter: 800, leave: 1000}"
         -->
        <div>
            <button @click="show1 = !show1">Toogle1</button>
        </div>
        <transition name="why"
                    type="transition"
                    @after-enter="afterEnter"
                    :duration="3000">
            <h2 class="type" v-if="show1">Hello World</h2>
        </transition>

        <!-- 两个元素之间切换 -->
        <div>
            <button @click="show2 = !show2">Toogle2</button>
        </div>
        <!--
          默认情况下，首次渲染的时候是没有动画的，如果我们希望给他添加上去动画，那么就可以增加另外一个属性appear
        -->
        <transition name="why" appear>
            <h2 v-if="show2">Hello World</h2>
            <h2 v-else>你好啊，李银河。</h2>
        </transition>

        <!-- 使用animate.css库，使用动画的类名 -->
        <div>
            <button @click="show3 = !show3">Toogle3</button>
        </div>
        <transition name="gsy"
                    enter-active-class="animate__animated animate__lightSpeedInRight"
                    leave-active-class="animate__animated animate__lightSpeedOutRight">
            <h2 v-if="show3">Hello World</h2>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "demo",
        data() {
            return {
                show: true,
                show1: true,
                show2: true,
                show3: true,
                Show: true
            }
        },
        methods: {
            afterEnter() {
                console.log('进入完成');
            }
        }
    }
</script>

<style scoped>
    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
    }

    .fade-enter-to,
    .fade-leave-from {
        opacity: 1;
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 1s ease;
    }

    /*增加位移的动画*/
    .fade-enter-from {
        transform: translateX(-60px);
    }

    .fade-leave-to {
        transform: translateX(60px);
    }

    .app {
        width: 500px;
        margin: 0 auto;
    }

    .bounce-enter-active {
        animation: bounce-in 0.5s;
    }

    .bounce-leave-active {
        animation: bounce-in 0.5s reverse;
    }

    @keyframes bounce-in {
        0% {
            transform: scale(0);
            color: lightblue;
        }
        50% {
            transform: scale(1.25);
            color: aqua;
        }
        100% {
            transform: scale(1);
            color: blue;
        }
    }

    .type {
        display: inline-block;
    }

    .why-enter-from,
    .why-leave-to {
        opacity: 0;
    }

    .why-enter-to,
    .why-leave-from {
        opacity: 1;
    }

    .why-enter-active,
    .why-leave-active {
        transition: opacity 1s ease;
    }

    .why-enter-active {
        animation: move 5s ease;
    }

    @keyframes move {
        0% {
            transform: scale(0);
            background-color: deeppink;
        }
        50% {
            transform: scale(1.25);
            background-color: pink;
        }
        100% {
            transform: scale(1);
            background-color: lightgreen;
        }
    }
</style>